<template>
  <div>
    <h2>我的预约记录</h2>
    <el-row :gutter="20">
      <el-col v-for="reservation in reservations" :key="reservation.id" :span="12">
        <ReservationCard :reservation="reservation" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { findReservationByUserIdService } from '@/api/locationrecord'; // 导入 API 服务
import ReservationCard from '@/components/ReservationCard.vue'; // 引入预约信息卡片组件

const reservations = ref([]); // 初始化预约记录数组

// 获取预约记录的函数
const fetchReservations = async () => {
  try {
    const response = await findReservationByUserIdService(); // 获取当前用户的预约记录
    reservations.value = response.data; // 假设返回的数据在 `data` 属性中
  } catch (error) {
    console.error('Error fetching reservations:', error);
  }
};

// 组件挂载时获取数据
onMounted(fetchReservations);
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>
